<template>
  <!-- 预警记录 / 告警记录 / 离线记录 -->
  <view class="warnRecord">
    <view class="warnRecord-item">
      <view class="outDay">
        <view class="addUp">
          累计时长:
          <text> {{ parseInt(deltaTime / 60) }}分钟</text>
        </view>
        <view style="color: #00c9ae" @click="cellTimeClick">
          <image
            :src="baseImgUrl + 'day-icon.png'"
            mode="aspectFill"
            class="dayIcon"
          ></image>
          {{ switchingTime }}
        </view>
      </view>

      <uni-table :border="false" stripe emptyText="">
        <uni-tr>
          <uni-th align="center" width="50">序号</uni-th>
          <uni-th align="center" width="100">
            {{
              options.type == 1 ? "预警" : options.type == 2 ? "告警" : "离线"
            }}时间
          </uni-th>
          <uni-th align="center" width="80">持续时间</uni-th>
        </uni-tr>
        <block v-if="dataSource.length">
          <uni-tr v-for="(item, index) in dataSource" :key="index">
            <uni-td align="center">{{ index + 1 }}</uni-td>
            <uni-td align="center">{{ item.alarmTime }}</uni-td>
            <uni-td align="center">
              {{ parseInt(item.intervalTime / 60) }}m
            </uni-td>
          </uni-tr>
        </block>
        <block v-else>
          <uni-tr> </uni-tr>
        </block>
      </uni-table>

      <view v-if="!dataSource.length" style="height: calc(100vh - 185rpx)">
        <u-empty
          mode="list"
          text="暂无内容！"
          :icon="baseImgUrl + 'no-icon2.png'"
          style="margin: 0 auto"
        >
        </u-empty>
      </view>
    </view>
    <!-- 时间选择器 -->
    <u-datetime-picker
      ref="datetimePicker"
      :show="datetimeShow"
      v-model="timeValue"
      mode="date"
      :formatter="formatter"
      :minDate="minDate"
      :maxDate="maxDate"
      @close="pickerTimeClose"
      @cancel="pickerTimeClose()"
      @confirm="showTimeConfirm"
      :closeOnClickOverlay="true"
    ></u-datetime-picker>
  </view>
</template>

<script>
import {
  eventRecordDevicePage,
  eventRecordFindDeviceData,
} from "@/api/deviceManage.js";
import { formatters, dayTurnTime } from "@/utils/util.js";
import mixin from "@/utils/mixin.js";

export default {
  name: "warnRecord",
  mixins: [mixin],
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      options: {},
      switchingTime: "",
      deltaTime: 0,
      dataSource: [],
      pageConfig: {
        pageNo: 1,
        pageSize: 20,
        total: 0,
      },
    };
  },
  onLoad(options) {
    this.options = options;
    let title = "";
    if (options.type == 1) {
      title = "预警记录";
    } else if (options.type == 2) {
      title = "告警记录";
    } else if (options.type == 3) {
      title = "离线记录";
    }

    uni.setNavigationBarTitle({
      title,
    });

    this.switchingTime = this.options.switchingTime;
    this.getWarnList();
  },
  onReachBottom() {
    let current = (this.pageConfig.pageNo += 1);
    let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
    if (current <= pages) {
      this.getWarnList();
    }
  },
  methods: {
    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      }
      if (type === "month") {
        return `${value}月`;
      }
      if (type === "day") {
        return `${value}日`;
      }
      return value;
    },
    cellTimeClick() {
      var minDateNum = +new Date(); //获取当前时间的毫秒数

      this.maxDate = minDateNum;
      this.timeValue = this.maxDate;
      setTimeout(() => {
        this.datetimeShow = true;
      }, 100);
    },
    pickerTimeClose() {
      this.datetimeShow = false;
    },
    /* 时间选择器 确定 */
    showTimeConfirm(e) {
      let arr = e.value;
      if (arr) {
        this.switchingTime = formatters(arr, "YY/MM/DD");
        this.dataSource = [];
        this.pageConfig.pageNo = 1;
        this.getWarnList();
      }
      this.datetimeShow = false;
    },
    getWarnList() {
      let data = {
        deviceId: this.options.deviceId,
        type: this.options.type,
        startDate: dayTurnTime(this.switchingTime + " 00:00:00"),
        endDate: dayTurnTime(this.switchingTime + " 23:59:59"),
        pageNo: this.pageConfig.pageNo,
        pageSize: this.pageConfig.pageSize,
      };

      eventRecordDevicePage(data).then((res) => {
        this.dataSource = this.dataSource.concat(res.result.records || []);
        this.pageConfig.total = res.result.total;
      });

      let data2 = {
        deviceId: this.options.deviceId,
        startDate: dayTurnTime(this.switchingTime + " 00:00:00"),
        endDate: dayTurnTime(this.switchingTime + " 23:59:59"),
      };
      eventRecordFindDeviceData(data2).then((res) => {
        let { earlyWarningTime, giveAnAlarmTime, offLineTime } = res.result;
        if (this.options.type == 1) {
          this.deltaTime = earlyWarningTime;
        } else if (this.options.type == 2) {
          this.deltaTime = giveAnAlarmTime;
        } else if (this.options.type == 3) {
          this.deltaTime = offLineTime;
        }
      });
    },
  },
};
</script>

<style lang="scss" >
.warnRecord {
  flex: 1;
  padding: 0 15rpx;
  background: #f9f9f9;

  .warnRecord-item {
    background: #fff;
  }

  .outDay {
    display: flex;
    justify-content: space-between;
    padding: 25rpx 25rpx;

    color: #333333;
    font-size: 26rpx;

    .addUp {
      font-size: 28rpx;
      color: #a1a1a1;

      text {
        font-size: 30rpx;
        color: #030303;
        font-weight: bold;
      }
    }

    .dayIcon {
      margin-right: 10rpx;
      width: 26rpx;
      height: 26rpx;
    }
  }

  .uni-table-tr {
    .uni-table-th {
      font-size: 26rpx;
      color: #a1a1a1;
      font-weight: 400;
    }
  }

  .uni-table-tr:nth-child(even) {
    background: #fefefe;
  }

  .uni-table-tr:nth-child(odd) {
    background: #f9f9f9;
  }
}
</style>


